/*
 * Author： Lee
 * Create Time: 2018-02-07
 * Description:
 * CopyRight:
 * */
import React, { Component } from 'react';
import { message } from 'antd';
/*
 * Manage state
 * */
import dva from 'dva';
import { connect } from 'dva';
import history from 'history';
import createHistory from 'history/createHashHistory';
import createLoading from 'dva-loading';
/*
 * Custom Components
 * */
import HorizontalPipe from './features/HorizontalPipe';
import HorizontalTank from './features/HorizontalTank';
import HorizontalDownValve from './features/HorizontalDownValve';
import LeftTWayPipe from './features/LeftTWayPipe';
import Pump from './features/Pump';
import RightTWayPipe from './features/RightTWayPipe';
import UpLeftAnglePipe from './features/UpLeftAnglePipe';
import UpRightAnglePipe from './features/UpRightAnglePipe';
import UpTWayPipe from './features/UpTWayPipe';
import VerticalLeftValve from './features/VerticalLeftValve';
import VerticalPipe from './features/VerticalPipe';
import VerticalRightValve from './features/VerticalRightValve';
import VerticalTank from './features/VerticalTank';

export default class Scada extends Component {
  constructor(props) {
    super(props);
    console.log('this is props,', this.props);
    this.initialVariables();
    this.initialStates();
  }

  /*
   * 变量初始化
   * */
  initialVariables() {
    /*
     * 竖直最上方管道
     * */
    this.verticalPipe_1 = {
      x: 100,
      y: 10,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'verticalPipe_1',
    };
    this.verticalPipe_2 = {
      x: 300,
      y: 10,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'verticalPipe_2',
    };
    this.verticalPipe_3 = {
      x: 1400,
      y: 10,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'verticalPipe_3',
    };
    this.verticalPipe_4 = {
      x: 1600,
      y: 10,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'verticalPipe_4',
    };
    this.verticalPipe_5 = {
      x: 600,
      y: 700,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'verticalPipe_5',
    };
    this.verticalPipe_6 = {
      x: 700,
      y: 700,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'verticalPipe_6',
    };
    this.verticalPipe_7 = {
      x: 600,
      y: 850,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'verticalPipe_7',
    };
    /*
     * 竖直水箱
     * */
    this.verticalTank_1 = {
      x: 25,
      y: 26,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      waterHeight: 100,
      label: 'verticalTank_1',
    };
    this.verticalTank_2 = {
      x: 125,
      y: 26,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      waterHeight: 100,
      label: 'verticalTank_2',
    };
    this.verticalTank_3 = {
      x: 675,
      y: 26,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      waterHeight: 100,
      label: 'verticalTank_3',
    };
    this.verticalTank_4 = {
      x: 775,
      y: 26,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      waterHeight: 100,
      label: 'verticalTank_4',
    };
    /*
     * 开关
     * */
    this.verticalLeftValve_1 = {
      x: 0,
      y: 500,
      width: 100,
      height: 100,
      work: false,
      label: 'verticalLeftValve_1',
    };
    this.verticalLeftValve_2 = {
      x: 1300,
      y: 500,
      width: 100,
      height: 100,
      work: false,
      label: 'verticalLeftValve_2',
    };
    this.verticalLeftValve_3 = {
      x: 500,
      y: 800,
      width: 100,
      height: 100,
      work: false,
      label: 'verticalLeftValve_3',
    };
    this.verticalRightValve_1 = {
      x: 400,
      y: 500,
      width: 100,
      height: 100,
      work: false,
      label: 'verticalRightValve_1',
    };
    this.verticalRightValve_2 = {
      x: 1700,
      y: 500,
      width: 100,
      height: 100,
      work: false,
      label: 'verticalRightValve_2',
    };
    this.verticalRightValve_3 = {
      x: 800,
      y: 800,
      width: 100,
      height: 100,
      work: false,
      label: 'verticalRightValve_3',
    };
    this.horizontalDownValve = {
      x: 1500,
      y: 850,
      width: 100,
      height: 100,
      work: false,
      label: 'horizontalDownValve',
    };
    // T型管道
    this.leftTWayPipe_1 = {
      x: 100,
      y: 500,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'leftTWayPipe_1',
    };
    this.leftTWayPipe_2 = {
      x: 1400,
      y: 500,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'leftTWayPipe_2',
    };
    this.leftTWayPipe_3 = {
      x: 600,
      y: 800,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'leftTWayPipe_3',
    };
    this.rightTWayPipe_1 = {
      x: 300,
      y: 500,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'rightTWayPipe_1',
    };
    this.rightTWayPipe_2 = {
      x: 1600,
      y: 500,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'rightTWayPipe_2',
    };
    this.rightTWayPipe_3 = {
      x: 700,
      y: 800,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'rightTWayPipe_3',
    };
    this.upTWayPipe_1 = {
      x: 300,
      y: 600,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'upTWayPipe_1',
    };
    this.upTWayPipe_2 = {
      x: 1400,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'upTWayPipe_2',
    };
    this.upTWayPipe_3 = {
      x: 1500,
      y: 950,
      width: 100,
      height: 100,
      color: '#c64cfb',
      fill: false,
      label: 'upTWayPipe_3',
    };
    // 弯道管道
    this.upRightAnglePipe_1 = {
      x: 100,
      y: 600,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'upRightAnglePipe_1',
    };
    this.upRightAnglePipe_2 = {
      x: 600,
      y: 950,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'upRightAnglePipe_2',
    };
    this.upRightAnglePipe_3 = {
      x: 700,
      y: 900,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'upRightAnglePipe_3',
    };
    this.upLeftAnglePipe = {
      x: 1600,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'upLeftAnglePipe',
    };
    // shuiping管道
    this.horizontalPipe_1 = {
      x: 200,
      y: 600,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'horizontalPipe_1',
    };
    this.horizontalPipe_2 = {
      x: 400,
      y: 600,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'horizontalPipe_2',
    };
    this.horizontalPipe_3 = {
      x: 500,
      y: 600,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'horizontalPipe_3',
    };
    this.horizontalPipe_4 = {
      x: 800,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_4',
    };
    this.horizontalPipe_5 = {
      x: 900,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_5',
    };
    this.horizontalPipe_6 = {
      x: 1000,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_6',
    };
    this.horizontalPipe_7 = {
      x: 1100,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_7',
    };
    this.horizontalPipe_8 = {
      x: 1200,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_8',
    };
    this.horizontalPipe_9 = {
      x: 1300,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_9',
    };
    this.horizontalPipe_10 = {
      x: 1500,
      y: 600,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_10',
    };
    this.horizontalPipe_11 = {
      x: 700,
      y: 950,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'horizontalPipe_11',
    };
    this.horizontalPipe_12 = {
      x: 800,
      y: 950,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'horizontalPipe_12',
    };
    this.horizontalPipe_13 = {
      x: 900,
      y: 950,
      width: 100,
      height: 100,
      color: '#1830fb',
      fill: false,
      label: 'horizontalPipe_13',
    };
    this.horizontalPipe_14 = {
      x: 800,
      y: 900,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_14',
    };
    this.horizontalPipe_15 = {
      x: 900,
      y: 900,
      width: 100,
      height: 100,
      color: '#fd3a45',
      fill: false,
      label: 'horizontalPipe_15',
    };
    this.horizontalPipe_16 = {
      x: 1400,
      y: 950,
      width: 100,
      height: 100,
      color: '#c64cbf',
      fill: false,
      label: 'horizontalPipe_16',
    };
    this.horizontalPipe_17 = {
      x: 1600,
      y: 950,
      width: 100,
      height: 100,
      color: '#c64cbf',
      fill: false,
      label: 'horizontalPipe_17',
    };
    this.horizontalPipe_18 = {
      x: 1700,
      y: 850,
      width: 100,
      height: 100,
      color: '#c64cbf',
      fill: false,
      label: 'horizontalPipe_18',
    };
    this.horizontalPipe_19 = {
      x: 1800,
      y: 850,
      width: 100,
      height: 100,
      color: '#c64cbf',
      fill: false,
      label: 'horizontalPipe_19',
    };
    this.pump_1 = {
      x: 525,
      y: 625,
      width: 150,
      height: 150,
      color: '#1830fb',
      work: false,
      label: 'pump_1',
    };
    this.pump_2 = {
      x: 725,
      y: 625,
      width: 150,
      height: 150,
      color: '#fd3a45',
      work: false,
      label: 'pump_2',
    };
    this.pump_3 = {
      x: 1600,
      y: 875,
      width: 150,
      height: 150,
      color: '#c64cbf',
      work: false,
      label: 'pump_3',
    };
    this.horizontalTank = {
      x: 900,
      y: 750,
      width: 100,
      height: 100,
      fill: false,
      color: '#c64cfb',
      waterHeight: 100,
      label: 'horizontalTank',
    };
  }

  /*
   * 状态初始化
   * */
  initialStates() {
    this.verticalPipe_1.fill = true;
    this.verticalPipe_2.fill = true;
    this.verticalPipe_3.fill = true;
    this.verticalPipe_4.fill = true;
    this.verticalPipe_5.fill = true;
    this.verticalPipe_6.fill = true;
    this.verticalPipe_7.fill = true;
    /*
     * 竖直水箱
     * */
    this.verticalTank_1.fill = true;
    this.verticalTank_2.fill = true;
    this.verticalTank_3.fill = true;
    this.verticalTank_4.fill = true;
    /*
     * 开关
     * */
    this.verticalLeftValve_1.work = true;
    this.verticalLeftValve_2.work = true;
    this.verticalLeftValve_3.work = true;
    this.verticalRightValve_1.work = true;
    this.verticalRightValve_2.work = true;
    this.verticalRightValve_3.work = true;
    this.horizontalDownValve.work = true;
    // T型管道
    this.leftTWayPipe_1.fill = true;
    this.leftTWayPipe_2.fill = true;
    this.leftTWayPipe_3.fill = true;
    this.rightTWayPipe_1.fill = true;
    this.rightTWayPipe_2.fill = true;
    this.rightTWayPipe_3.fill = true;
    this.upTWayPipe_1.fill = true;
    this.upTWayPipe_2.fill = true;
    this.upTWayPipe_3.fill = true;
    // 弯道管道
    this.upRightAnglePipe_1.fill = true;
    this.upRightAnglePipe_2.fill = true;
    this.upRightAnglePipe_3.fill = true;
    this.upLeftAnglePipe.fill = true;
    // shuiping管道
    this.horizontalPipe_1.fill = true;
    this.horizontalPipe_2.fill = true;
    this.horizontalPipe_3.fill = true;
    this.horizontalPipe_4.fill = true;
    this.horizontalPipe_5.fill = true;
    this.horizontalPipe_6.fill = true;
    this.horizontalPipe_7.fill = true;
    this.horizontalPipe_8.fill = true;
    this.horizontalPipe_9.fill = true;
    this.horizontalPipe_10.fill = true;
    this.horizontalPipe_11.fill = true;
    this.horizontalPipe_12.fill = true;
    this.horizontalPipe_13.fill = true;
    this.horizontalPipe_14.fill = true;
    this.horizontalPipe_15.fill = true;
    this.horizontalPipe_16.fill = true;
    this.horizontalPipe_17.fill = true;
    this.horizontalPipe_18.fill = true;
    this.horizontalPipe_19.fill = true;
    this.pump_1.work = true;
    this.pump_2.work = true;
    this.pump_3.work = true;
    this.horizontalTank.fill = true;
    this.changeState();
  }

  /*
   * 状态改变
   * */
  changeState() {}

  render() {
    return (
      <svg className="react-scada-box" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1920 1080">
        <VerticalPipe
          x={this.verticalPipe_1.x}
          y={this.verticalPipe_1.y}
          width={this.verticalPipe_1.width}
          height={this.verticalPipe_1.height}
          color={this.verticalPipe_1.color}
          fill={this.verticalPipe_1.fill}
          label={this.verticalPipe_1.label}
        />
        <VerticalPipe
          x={this.verticalPipe_2.x}
          y={this.verticalPipe_2.y}
          width={this.verticalPipe_2.width}
          height={this.verticalPipe_2.height}
          color={this.verticalPipe_2.color}
          fill={this.verticalPipe_2.fill}
          label={this.verticalPipe_2.label}
        />
        <VerticalPipe
          x={this.verticalPipe_3.x}
          y={this.verticalPipe_3.y}
          width={this.verticalPipe_3.width}
          height={this.verticalPipe_3.height}
          color={this.verticalPipe_3.color}
          fill={this.verticalPipe_3.fill}
          label={this.verticalPipe_3.label}
        />
        <VerticalPipe
          x={this.verticalPipe_4.x}
          y={this.verticalPipe_4.y}
          width={this.verticalPipe_4.width}
          height={this.verticalPipe_4.height}
          color={this.verticalPipe_4.color}
          fill={this.verticalPipe_4.fill}
          label={this.verticalPipe_4.label}
        />
        <g transform="scale(2,4)">
          <VerticalTank
            x={this.verticalTank_1.x}
            y={this.verticalTank_1.y}
            width={this.verticalTank_1.width}
            height={this.verticalTank_1.height}
            fill={this.verticalTank_1.fill}
            color={this.verticalTank_1.color}
            waterHeight={this.verticalTank_1.waterHeight}
            label={this.verticalTank_1.label}
          />
          <VerticalTank
            x={this.verticalTank_2.x}
            y={this.verticalTank_2.y}
            width={this.verticalTank_2.width}
            height={this.verticalTank_2.height}
            fill={this.verticalTank_2.fill}
            color={this.verticalTank_2.color}
            waterHeight={this.verticalTank_2.waterHeight}
            label={this.verticalTank_2.label}
          />
          <VerticalTank
            x={this.verticalTank_3.x}
            y={this.verticalTank_3.y}
            width={this.verticalTank_3.width}
            height={this.verticalTank_3.height}
            fill={this.verticalTank_3.fill}
            color={this.verticalTank_3.color}
            waterHeight={this.verticalTank_3.waterHeight}
            label={this.verticalTank_3.label}
          />
          <VerticalTank
            x={this.verticalTank_4.x}
            y={this.verticalTank_4.y}
            width={this.verticalTank_4.width}
            height={this.verticalTank_4.height}
            fill={this.verticalTank_4.fill}
            color={this.verticalTank_4.color}
            waterHeight={this.verticalTank_4.waterHeight}
            label={this.verticalTank_4.label}
          />
        </g>
        {/* 水箱下 */}
        <VerticalLeftValve
          x={this.verticalLeftValve_1.x}
          y={this.verticalLeftValve_1.y}
          width={this.verticalLeftValve_1.width}
          height={this.verticalLeftValve_1.height}
          work={this.verticalLeftValve_1.work}
          label={this.verticalLeftValve_1.label}
        />
        <LeftTWayPipe
          x={this.leftTWayPipe_1.x}
          y={this.leftTWayPipe_1.y}
          width={this.leftTWayPipe_1.width}
          height={this.leftTWayPipe_1.height}
          fill={this.leftTWayPipe_1.fill}
          color={this.leftTWayPipe_1.color}
          label={this.leftTWayPipe_1.label}
        />
        <RightTWayPipe
          x={this.rightTWayPipe_1.x}
          y={this.rightTWayPipe_1.y}
          width={this.rightTWayPipe_1.width}
          height={this.rightTWayPipe_1.height}
          fill={this.rightTWayPipe_1.fill}
          color={this.rightTWayPipe_1.color}
          label={this.rightTWayPipe_1.label}
        />
        <VerticalRightValve
          x={this.verticalRightValve_1.x}
          y={this.verticalRightValve_1.y}
          width={this.verticalRightValve_1.width}
          height={this.verticalRightValve_1.height}
          work={this.verticalRightValve_1.work}
          label={this.verticalRightValve_1.label}
        />
        <VerticalLeftValve
          x={this.verticalLeftValve_2.x}
          y={this.verticalLeftValve_2.y}
          width={this.verticalLeftValve_2.width}
          height={this.verticalLeftValve_2.height}
          work={this.verticalLeftValve_2.work}
          label={this.verticalLeftValve_2.label}
        />
        <LeftTWayPipe
          x={this.leftTWayPipe_2.x}
          y={this.leftTWayPipe_2.y}
          width={this.leftTWayPipe_2.width}
          height={this.leftTWayPipe_2.height}
          fill={this.leftTWayPipe_2.fill}
          color={this.leftTWayPipe_2.color}
          label={this.leftTWayPipe_2.label}
        />
        <RightTWayPipe
          x={this.rightTWayPipe_2.x}
          y={this.rightTWayPipe_2.y}
          width={this.rightTWayPipe_2.width}
          height={this.rightTWayPipe_2.height}
          fill={this.rightTWayPipe_2.fill}
          color={this.rightTWayPipe_2.color}
          label={this.rightTWayPipe_2.label}
        />
        <VerticalRightValve
          x={this.verticalRightValve_2.x}
          y={this.verticalRightValve_2.y}
          width={this.verticalRightValve_2.width}
          height={this.verticalRightValve_2.height}
          work={this.verticalRightValve_2.work}
          label={this.verticalRightValve_2.label}
        />
        <UpRightAnglePipe
          x={this.upRightAnglePipe_1.x}
          y={this.upRightAnglePipe_1.y}
          width={this.upRightAnglePipe_1.width}
          height={this.upRightAnglePipe_1.height}
          fill={this.upRightAnglePipe_1.fill}
          color={this.upRightAnglePipe_1.color}
          label={this.upRightAnglePipe_1.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_1.x}
          y={this.horizontalPipe_1.y}
          width={this.horizontalPipe_1.width}
          height={this.horizontalPipe_1.height}
          fill={this.horizontalPipe_1.fill}
          color={this.horizontalPipe_1.color}
          label={this.horizontalPipe_1.label}
        />
        <UpTWayPipe
          x={this.upTWayPipe_1.x}
          y={this.upTWayPipe_1.y}
          width={this.upTWayPipe_1.width}
          height={this.upTWayPipe_1.height}
          fill={this.upTWayPipe_1.fill}
          color={this.upTWayPipe_1.color}
          label={this.upTWayPipe_1.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_2.x}
          y={this.horizontalPipe_2.y}
          width={this.horizontalPipe_2.width}
          height={this.horizontalPipe_2.height}
          fill={this.horizontalPipe_2.fill}
          color={this.horizontalPipe_2.color}
          label={this.horizontalPipe_2.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_3.x}
          y={this.horizontalPipe_3.y}
          width={this.horizontalPipe_3.width}
          height={this.horizontalPipe_3.height}
          fill={this.horizontalPipe_3.fill}
          color={this.horizontalPipe_3.color}
          label={this.horizontalPipe_3.label}
        />
        <Pump
          x={this.pump_1.x}
          y={this.pump_1.y}
          width={this.pump_1.width}
          height={this.pump_1.height}
          work={this.pump_1.work}
          color={this.pump_1.color}
          label={this.pump_1.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_4.x}
          y={this.horizontalPipe_4.y}
          width={this.horizontalPipe_4.width}
          height={this.horizontalPipe_4.height}
          fill={this.horizontalPipe_4.fill}
          color={this.horizontalPipe_4.color}
          label={this.horizontalPipe_4.label}
        />
        <Pump
          x={this.pump_2.x}
          y={this.pump_2.y}
          width={this.pump_2.width}
          height={this.pump_2.height}
          work={this.pump_2.work}
          color={this.pump_2.color}
          label={this.pump_2.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_5.x}
          y={this.horizontalPipe_5.y}
          width={this.horizontalPipe_5.width}
          height={this.horizontalPipe_5.height}
          fill={this.horizontalPipe_5.fill}
          color={this.horizontalPipe_5.color}
          label={this.horizontalPipe_5.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_6.x}
          y={this.horizontalPipe_6.y}
          width={this.horizontalPipe_6.width}
          height={this.horizontalPipe_6.height}
          fill={this.horizontalPipe_6.fill}
          color={this.horizontalPipe_6.color}
          label={this.horizontalPipe_6.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_7.x}
          y={this.horizontalPipe_7.y}
          width={this.horizontalPipe_7.width}
          height={this.horizontalPipe_7.height}
          fill={this.horizontalPipe_7.fill}
          color={this.horizontalPipe_7.color}
          label={this.horizontalPipe_7.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_8.x}
          y={this.horizontalPipe_8.y}
          width={this.horizontalPipe_8.width}
          height={this.horizontalPipe_8.height}
          fill={this.horizontalPipe_8.fill}
          color={this.horizontalPipe_8.color}
          label={this.horizontalPipe_8.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_9.x}
          y={this.horizontalPipe_9.y}
          width={this.horizontalPipe_9.width}
          height={this.horizontalPipe_9.height}
          fill={this.horizontalPipe_9.fill}
          color={this.horizontalPipe_9.color}
          label={this.horizontalPipe_9.label}
        />
        <UpTWayPipe
          x={this.upTWayPipe_2.x}
          y={this.upTWayPipe_2.y}
          width={this.upTWayPipe_2.width}
          height={this.upTWayPipe_2.height}
          fill={this.upTWayPipe_2.fill}
          color={this.upTWayPipe_2.color}
          label={this.upTWayPipe_2.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_10.x}
          y={this.horizontalPipe_10.y}
          width={this.horizontalPipe_10.width}
          height={this.horizontalPipe_10.height}
          fill={this.horizontalPipe_10.fill}
          color={this.horizontalPipe_10.color}
          label={this.horizontalPipe_10.label}
        />
        <UpLeftAnglePipe
          x={this.upLeftAnglePipe.x}
          y={this.upLeftAnglePipe.y}
          width={this.upLeftAnglePipe.width}
          height={this.upLeftAnglePipe.height}
          fill={this.upLeftAnglePipe.fill}
          color={this.upLeftAnglePipe.color}
          label={this.upLeftAnglePipe.label}
        />
        <VerticalPipe
          x={this.verticalPipe_5.x}
          y={this.verticalPipe_5.y}
          width={this.verticalPipe_5.width}
          height={this.verticalPipe_5.height}
          fill={this.verticalPipe_5.fill}
          color={this.verticalPipe_5.color}
          label={this.verticalPipe_5.label}
        />
        <VerticalPipe
          x={this.verticalPipe_6.x}
          y={this.verticalPipe_6.y} width={this.verticalPipe_6.width}
          height={this.verticalPipe_6.height}
          fill={this.verticalPipe_6.fill}
          color={this.verticalPipe_6.color}
          label={this.verticalPipe_6.label}
        />
        <VerticalLeftValve
          x={this.verticalLeftValve_3.x}
          y={this.verticalLeftValve_3.y}
          width={this.verticalLeftValve_3.width}
          height={this.verticalLeftValve_3.height}
          work={this.verticalLeftValve_3.work}
          label={this.verticalLeftValve_3.label}
        />
        <LeftTWayPipe
          x={this.leftTWayPipe_3.x}
          y={this.leftTWayPipe_3.y}
          width={this.leftTWayPipe_3.width}
          height={this.leftTWayPipe_3.height}
          fill={this.leftTWayPipe_3.fill}
          color={this.leftTWayPipe_3.color}
          label={this.leftTWayPipe_3.label}
        />
        <VerticalPipe
          x={this.verticalPipe_7.x}
          y={this.verticalPipe_7.y}
          width={this.verticalPipe_7.width}
          height={this.verticalPipe_7.height}
          fill={this.verticalPipe_7.fill}
          color={this.verticalPipe_7.color}
          label={this.verticalPipe_7.label}
        />
        <RightTWayPipe
          x={this.rightTWayPipe_3.x}
          y={this.rightTWayPipe_3.y}
          width={this.rightTWayPipe_3.width}
          height={this.rightTWayPipe_3.height}
          fill={this.rightTWayPipe_3.fill}
          color={this.rightTWayPipe_3.color}
          label={this.rightTWayPipe_3.label}
        />
        <VerticalRightValve
          x={this.verticalRightValve_3.x}
          y={this.verticalRightValve_3.y}
          width={this.verticalRightValve_3.width}
          height={this.verticalRightValve_3.height}
          work={this.verticalRightValve_3.work}
          label={this.verticalRightValve_3.label}
        />
        <UpRightAnglePipe
          x={this.upRightAnglePipe_2.x}
          y={this.upRightAnglePipe_2.y}
          width={this.upRightAnglePipe_2.width}
          height={this.upRightAnglePipe_2.height}
          fill={this.upRightAnglePipe_2.fill}
          color={this.upRightAnglePipe_2.color}
          label={this.upRightAnglePipe_2.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_11.x}
          y={this.horizontalPipe_11.y}
          width={this.horizontalPipe_11.width}
          height={this.horizontalPipe_11.height}
          fill={this.horizontalPipe_11.fill}
          color={this.horizontalPipe_11.color}
          label={this.horizontalPipe_11.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_12.x}
          y={this.horizontalPipe_12.y}
          width={this.horizontalPipe_12.width}
          height={this.horizontalPipe_12.height}
          fill={this.horizontalPipe_12.fill}
          color={this.horizontalPipe_12.color}
          label={this.horizontalPipe_12.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_13.x}
          y={this.horizontalPipe_13.y}
          width={this.horizontalPipe_13.width}
          height={this.horizontalPipe_13.height}
          fill={this.horizontalPipe_13.fill}
          color={this.horizontalPipe_13.color}
          label={this.horizontalPipe_13.label}
        />
        <UpRightAnglePipe
          x={this.upRightAnglePipe_3.x}
          y={this.upRightAnglePipe_3.y} width={this.upRightAnglePipe_3.width}
          height={this.upRightAnglePipe_3.height}
          fill={this.upRightAnglePipe_3.fill}
          color={this.upRightAnglePipe_3.color}
          label={this.upRightAnglePipe_3.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_14.x}
          y={this.horizontalPipe_14.y}
          width={this.horizontalPipe_14.width}
          height={this.horizontalPipe_14.height}
          fill={this.horizontalPipe_14.fill}
          color={this.horizontalPipe_14.color}
          label={this.horizontalPipe_14.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_15.x}
          y={this.horizontalPipe_15.y}
          width={this.horizontalPipe_15.width}
          height={this.horizontalPipe_15.height}
          fill={this.horizontalPipe_15.fill}
          color={this.horizontalPipe_15.color}
          label={this.horizontalPipe_15.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_16.x}
          y={this.horizontalPipe_16.y}
          width={this.horizontalPipe_16.width}
          height={this.horizontalPipe_16.height}
          fill={this.horizontalPipe_16.fill}
          color={this.horizontalPipe_16.color}
          label={this.horizontalPipe_16.label}
        />
        <HorizontalTank
          x={this.horizontalTank.x}
          y={this.horizontalTank.y}
          width={this.horizontalTank.width}
          height={this.horizontalTank.height}
          fill={this.horizontalTank.fill}
          color={this.horizontalTank.color}
          waterHeight={this.horizontalTank.waterHeight}
          label={this.horizontalTank.label}
        />
        <HorizontalDownValve
          x={this.horizontalDownValve.x}
          y={this.horizontalDownValve.y}
          width={this.horizontalDownValve.width}
          height={this.horizontalDownValve.height}
          work={this.horizontalDownValve.work}
          label={this.horizontalDownValve.label}
        />
        <UpTWayPipe
          x={this.upTWayPipe_3.x}
          y={this.upTWayPipe_3.y}
          width={this.upTWayPipe_3.width} height={this.upTWayPipe_3.height}
          fill={this.upTWayPipe_3.fill}
          color={this.upTWayPipe_3.color}
          label={this.upTWayPipe_3.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_17.x}
          y={this.horizontalPipe_17.y}
          width={this.horizontalPipe_17.width}
          height={this.horizontalPipe_17.height}
          fill={this.horizontalPipe_17.fill}
          color={this.horizontalPipe_17.color}
          label={this.horizontalPipe_17.label}
        />
        <Pump
          x={this.pump_3.x}
          y={this.pump_3.y}
          width={this.pump_3.width}
          height={this.pump_3.height}
          work={this.pump_3.work}
          color={this.pump_3.color}
          label={this.pump_3.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_18.x}
          y={this.horizontalPipe_18.y}
          width={this.horizontalPipe_18.width}
          height={this.horizontalPipe_18.height}
          fill={this.horizontalPipe_18.fill}
          color={this.horizontalPipe_18.color}
          label={this.horizontalPipe_18.label}
        />
        <HorizontalPipe
          x={this.horizontalPipe_19.x}
          y={this.horizontalPipe_19.y}
          width={this.horizontalPipe_19.width}
          height={this.horizontalPipe_19.height}
          fill={this.horizontalPipe_19.fill}
          color={this.horizontalPipe_19.color}
          label={this.horizontalPipe_19.label}
        />
      </svg>
    );
  }
}
